<template>
  <a-content>
    <template #search>
      <a-search ref="searchRef" :sapce="16">
        <a-search-item name="name"
          ><a-input placeholder="助教姓名/编号"
        /></a-search-item>
        <a-search-item name="name"
          ><a-select placeholder="就读院校"
        /></a-search-item>
        <a-search-item name="name"
          ><a-select placeholder="就读专业"
        /></a-search-item>
        <a-search-item name="name">
          <a-select placeholder="助教管理专员" />
        </a-search-item>
        <a-search-item v-if="state.showSearchItem" name="name"
          ><a-select placeholder="就读国家"
        /></a-search-item>
        <a-search-item v-if="state.showSearchItem" name="name"
          ><a-input placeholder="联系电话/邮箱"
        /></a-search-item>
        <a-search-item v-if="state.showSearchItem" name="name"
          ><a-select placeholder="支持讲座"
        /></a-search-item>
        <a-search-item v-if="state.showSearchItem" name="name"
          ><a-select placeholder="合作阶段"
        /></a-search-item>
        <a-search-item name="name"
          ><a-select placeholder="开通教师端账号"
        /></a-search-item>
        <a-search-item button :span="4">
          <a-search-button
            :show-toggle="true"
            v-model:show="state.showSearchItem"
            @toggle="useSetHeight"
          />
        </a-search-item>
      </a-search>
    </template>
    <Table
      ref="tableRef"
      :column="columns"
      :cell-class-name="cellClassName"
      :data="tableData"
      @checkbox-change="checkboxChange"
    >
      <template #face="dataRow">
        <Image :src="dataRow?.row?.face" />
      </template>
      <template #name="dataRow">
        <span class="cp" @click="toDetailed(dataRow?.row)">{{
          dataRow?.row?.a0001
        }}</span>
      </template>
      <template #operate="dataRow">
        <button type="button" @click="state.open = true">编辑</button>
        <button type="button" @click="state.openPassword = true">密码</button>
        <button type="button" @click="state.search = true">筛选</button>
      </template>
    </Table>
  </a-content>
  <ModalForm v-model:open="state.open" title="新增教授" />
  <ModalPassword v-model:open="state.openPassword" title="重置密码" />
  <CustomSearch v-model:open="state.search" title="筛选" />
</template>
<script lang="ts" setup>
import { nextTick, ref, reactive, Ref } from "vue";
import { useRouter } from "vue-router";
import { useTable, useTabMenu } from "@/hook/index";
import { columns } from "./column";
import type { RowVO } from "./interface";
import Table from "@/components/table/index.vue";
import Image from "@/components/image/index.vue";
import ModalForm from "../components/form/index.vue";
import ModalPassword from "../components/password/index.vue";
import CustomSearch from "../components/customSearch/index.vue";
import { VxeTablePropTypes } from "vxe-table";

/**
 * hook
 */
const tableRef: Ref<HTMLElement | null> = ref(null);
const router = useRouter();
const { useLoading, useSetCellInnerPrimary, useSetHeight } = useTable(tableRef);
const { useSetTabMenuName } = useTabMenu();
// ref
const tableData = ref<RowVO[]>([]);
// reactive
const state = reactive<any>({
  showSearchItem: false,
  open: false,
  openPassword: false,
  search: false,
});
const toDetailed = (row: any): void => {
  useSetTabMenuName(row.a0001);
  router.push({
    path: "/professorDetailed/" + row.id,
  });
};

setTimeout(() => {
  tableData.value = [
    {
      id: 12165456,
      a0001: "Stanley",
      a0002:
        "https://img2.baidu.com/it/u=246493236,1763577649&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
      a0003: "男",
      a0004: "中国",
      a0005: "MSG000001",
      a0006: "028-12165321",
      a0007: "admin@sas.upenn.eud",
      a0008: "",
      a0009: "宾夕法尼亚大学",
      a00010: "宾夕法尼亚大学",
      a00011: "宾夕法尼亚大学",
      a00012: "宾夕法尼亚大学",
      a00013: "宾夕法尼亚大学",
      a00014: "宾夕法尼亚大学",
      a00015: "宾夕法尼亚大学",
      a00016: "宾夕法尼亚大学",
      a00017: "宾夕法尼亚大学",
    },
  ];
  useLoading(false);
}, 1000);

const edit = () => {};

const cellClassName: VxeTablePropTypes.CellStyle<RowVO> = ({ column }) => {
  return useSetCellInnerPrimary(column.field, ["a0001"]);
};

const checkboxChange = ({ row }) => {
  console.log("row", row);
};
</script>
./column.s
